<template>
  <div class="category">
    <!-- 分类区域 -->
    <ul>
      <li v-for="item of category" :key="item.mallCategoryId">
      <!-- <li v-for="item of getCategory[0]" :key="item.mallCategoryId"> -->
        <router-link :to="{name:'list',params:{id:item.mallCategoryId}}">
          <img v-lazy="item.image" alt="">
          <p>{{item.mallCategoryName}}</p>
        </router-link>
      </li>
    </ul>
    <div class="advertise">
        <img v-lazy="advertesPicture">
        <!-- <img v-lazy="getCategory[1]" alt=""> -->
    </div>
  </div>
</template>

<script>


export default {
  props:["category","advertesPicture"],
  // props:["getCategory"]
  created(){
    // console.log(this.category)
  }
};
</script>

<style lang="scss" scoped>

    .category{
      padding: 3px;
      ul{
        width: 100%;
        display: flex;
      }
      li{
        flex: 1;
        width: 50px;
        text-align: center;
        background-color: white;
        img{
          width: 50px;
          height: 50px;
        }
        p{
          margin: 0;
          font-size: 12px
        }
      }
    }
    .advertise{
      margin: 3px 0;
      img{
        width: 100%;
      }
    }
</style>